import React from "react"
import {getAllStory} from "../../api";
import SmallCard from "./SmallCard";
import {WingBlank} from "antd-mobile";
import styles from "./SelectSmall.css"

export default class SelectSmall extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            cards: []
        }
    }
    componentDidMount() {
        this.getData()
    }

    render() {
        return (
                <div className={styles.box}>
                    {this.state.cards.map(item => {
                        return <div key={item.uuid} className={styles.card_item} onClick={()=>this.goToDetail(item.uuid,item.typ)}><SmallCard type={item.typ}/></div>
                    })}
                </div>
        );
    }
    goToDetail = (uuid,type) => {
        setTimeout(()=>this.props.history.push('/story/detail?uuid='+uuid+'&type='+type),1800)
    }
    async getData() {
        let res = await getAllStory()
        this.setState({
            cards: res.data
        })
        console.log(this.state)
    }
}